<template>
  <view>
    <!-- 搜索框开始 -->
    <YgSearch></YgSearch>
    <!-- 搜索框结束 -->

    <!-- 轮播图开始 -->
    <u-swiper :list="swiperList" name="image_src" height="340"></u-swiper>
    <!-- 轮播图结束 -->

    <!-- 导航开始 -->
    <view class="catitem  u-flex">
      <navigator
        v-for="item in catitems"
        :key="item.name"
        class="u-flex-1 u-padding-30"
      >
        <u-image :src="item.image_src" width="100%" mode="widthFix"></u-image>
      </navigator>
    </view>
    <!-- 导航结束 -->

    <!-- 楼层开始 -->
    <view class="floor">
      <view class="floor-group" v-for="(item1, index1) in floors" :key="index1">
        <!-- 标题 -->
        <view class="group-title">
          <u-image
            :src="item1.floor_title.image_src"
            width="100%"
            mode="widthFix"
          ></u-image>
        </view>

        <!-- 内容 -->
        <view class="group-content">
          <navigator
            v-for="(item2, index2) in item1.product_list"
            :key="index2"
          >
            <u-image
              :src="item2.image_src"
              height="100%"
              :mode="index2 === 0 ? 'widthFix' : 'scaleToFill'"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 楼层结束 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数组
      swiperList: [],
      // 导航数组
      catitems: [],
      // 楼层数组
      floors: [],
    };
  },
  async onLoad() {
    // uni 方法

    //   const [err, res] = await uni.request({
    //     url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
    //   });
    //   //console.log(res);
    //   this.swiperList = res.data.message;

    //  uview 方法
    // 轮播图
    const resSwiper = await this.$u.get("/home/swiperdata");
    this.swiperList = resSwiper.message;

    // 导航
    const resCate = await this.$u.get("/home/catitems");
    this.catitems = resCate.message;

    //楼层
    const resFloors = await this.$u.get("/home/floordata");
    this.floors = resFloors.message;
  },
};
</script>

<style lang="scss">
.floor .group-content {
  // 清除浮动
  overflow: hidden;
}
.floor .group-content navigator {
  float: left;
  width: 32%;
  border-left: 5rpx solid #fff;
  border-right: 5rpx solid #fff;
}
.floor .group-content navigator:nth-last-child(-n + 4) {
  height: 197rpx;
}
.floor .group-content navigator:nth-last-child(-n + 2) {
  margin-top: 10rpx;
}
</style>
